<template>

    <el-tabs type="border-card" style="margin-top: 30px">
        <el-tab-pane>
            <template #label>
                <span>
                  流程变量
                </span>
            </template>

            <el-button type="primary" @click="addFlowParam()">添加流程变量</el-button>

            <el-table :data="globalProperties.tableData"
                      :border="true"
                      :stripe="true"
                      :show-overflow-tooltip="true"
                      style="margin-top: 20px"
            >
                <el-table-column prop="paramName" label="变量名称">
                    <template #default="scope">
                        <el-input v-model="scope.row.paramName" />
                    </template>
                </el-table-column>
                <el-table-column prop="paramType" label="变量类型">
                    <template #default="scope">
                        <el-select v-model="scope.row.paramType" placeholder="变量类型" style="width: 100%">
                            <el-option label="字符串" value="String" />
                            <el-option label="整型" value="Integer" />
                            <el-option label="浮点型" value="Double" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="paramType" label="变量值">
                    <template #default="scope">
                        <el-input v-model="scope.row.paramValue"/>
                    </template>
                </el-table-column>
                <el-table-column prop="paramDesc" label="变量描述">
                    <template #default="scope">
                        <el-input  v-model="scope.row.paramDesc"/>
                    </template>
                </el-table-column>
                <el-table-column align="center">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button @click="deleteFlowParam(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts" name="YwuGlobalParamDrawer">
import {computed, defineProps, ref} from "vue";

let props = defineProps(['globalProperties']);

let globalProperties = computed(() => {return props['globalProperties']})

function randomNumber() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}

function generateUUID() {
    return (randomNumber() + randomNumber() + "-" + randomNumber() + "-" + randomNumber() +
        "-" + randomNumber() + "-" + randomNumber() + randomNumber() + randomNumber());
}

function addFlowParam() {
    globalProperties.value.tableData.push({
        id: generateUUID(),
        paramName: '',
        paramType: '',
        paramValue: '',
        paramDesc: ''
    })
}

function deleteFlowParam(row:any) {
    for (let index = 0; index < globalProperties.value.tableData.length; index++) {
        if (globalProperties.value.tableData[index].id === row.id) {
            globalProperties.value.tableData.splice(index, 1);
            return;
        }
    }
}

</script>

<style scoped lang="less">

</style>